<template>
	<view class="box">
		<view class="tito">
			<view class="yuan"></view>
			<view class="image-text-phone-icon">
				<view class="image">
					<image :src="userData.logo" mode=""></image>
				</view>
				<view class="text-phone">
					<view class="text">
						{{ userData.name }}
					</view>
					<view class="phone">
						{{ userData.mobile || '请设置手机号' }}
					</view>
				</view>
				<view class="icon" @click="getCenter">
					<image src="../../static/image/bianji.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="balance-coupons">
			<view class="balance" @click="balance">
				<view class="text-money">
					<view class="text">
						余额
					</view>
					<view class="money">
						￥{{ userData.nonPresentIncome }}
					</view>
				</view>
				<view class="icon">
					<image src="../../static/image/yuei.png" mode=""></image>
				</view>
			</view>
			<view class="coupons balance" @click="getcoupon">
				<view class="text-money">
					<view class="text">
						优惠劵
					</view>
					<view class="money">
						{{ userData.couponCount }}
					</view>
				</view>
				<view class="icon">
					<image src="../../static/image/yhj.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="myOrder-allOrders">
			<view class="text-myOrder-allOrders">
				<view class="myOrder">
					我的订单
				</view>
				<view class="allOrders" @click="getorderForGoods">
					全部订单
					<uni-icons type="right" size="18" color="#B1B2B2"></uni-icons>
				</view>
			</view>
			<view class="list-text">
				<view class="image-text" v-for="(item, index) in management" :key="index" @click="getGoods(item)">
					<image class="image" :src="item.url" mode=""></image>
					<view class="text">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<view class="myOrder-allOrders activity">
			<view class="text-myOrder-allOrders">
				<view class="myOrder">
					活动
				</view>
			</view>
			<view class="list-text">
				<view class="image-text" v-for="(item, index) in activityList" :key="index" @click="getmyOrder(item)">
					<image class="image" :src="item.url" mode=""></image>
					<view class="text">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<view class="merchantTools">
			<view class="tools">
				商家工具
			</view>
			<view class="metchantList">
				<view class="image-text-icon" v-for="(item, index) in merchantToolsList" :key="index"
					@click="gettools(item)">
					<view class="image">
						<image :src="item.url" mode=""></image>
					</view>
					<view class="text">
						{{ item.name }}
					</view>
					<view class="icon">
						<uni-icons type="right" size="20" color="#B1B2B2"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			management: [{
				url: require("@/static/image/daizhifu.png"),
				name: '待支付'
			},
			{
				url: require("@/static/image/daifahuo.png"),
				name: '待发货'
			},
			{
				url: require("@/static/image/daishouhuo.png"),
				name: '待收货'
			},
			{
				url: require("@/static/image/tuihuanhuo.png"),
				name: '退换货'
			},
			],
			activityList: [{
				url: require("@/static/image/tuiguang.png"),
				name: '推广统计'
			},
			{
				url: require("@/static/image/yaoqing.png"),
				name: '邀请好友'
			},
			{
				url: require("@/static/image/jifen.png"),
				name: '我的积分'
			},
			{
				url: require("@/static/image/tuandui.png"),
				name: '我的团队'
			},
			],
			merchantToolsList: [{
				url: require("@/static/image/shebeis.png"),
				name: '我的设备'
			},
			{
				url: require("@/static/image/yinshui.png"),
				name: '我的饮水'
			},
			{
				url: require("@/static/image/shouhous.png"),
				name: '我的售后'
			},
			{
				url: require("@/static/image/shouhous.png"),
				name: '提现明细'
			},
			// {
			// 	url: require("@/static/image/shouhous.png"),
			// 	name: '我的售后s'
			// },
			{
				url: require("@/static/image/daili.png"),
				name: '代理申请'
			},
			{
				url: require("@/static/image/chognzhis.png"),
				name: '充值记录'
			},
			// {
			// 	url: require("@/static/image/jiankang.png"),
			// 	name: '健康档案'
			// },
			{
				url: require("@/static/image/kefu.png"),
				name: '客服中心'
			}
			],
			userData: {},
		};
	},
	onShow() {
		this.customerInfo()
	},
	methods: {
		//个人信息
		async customerInfo(code) {
			let res = await this.$request.get("/water-platform-app-api/customer/customer/info")
			console.log(res.data, '个人信息');
			this.userData = res.data
			uni.setStorageSync("userID",res.data.id)
		},
		//个人中心
		getCenter() {
			uni.navigateTo({
				url: "/subpackageA/pages/my/myCenter"
			})
		},
		//跳转全部订单
		getorderForGoods() {
			uni.navigateTo({
				url: "/subpackageA/pages/my/orderForGoods?current=" + "" + "&status=" + ""
			})
		},
		//我的订单 跳转定单
		getGoods(e) {
			if (e.name == "待支付") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/orderForGoods?current=" + 1 + "&status=" + "0"
				})
			}
			if (e.name == "待发货") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/orderForGoods?current=" + 2 + "&status=" + "1"
				})
			}
			if (e.name == "待收货") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/orderForGoods?current=" + 3 + "&status=" + "2"
				})
			}
			if (e.name == "退换货") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/orderForGoods?current=" + 4 + "&status=" + "3"
				})
			}
		},
		//活动 跳转
		getmyOrder(e) {
			if (e.name == "推广统计") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/promotionStatistics"
				})
			}
			if (e.name == "邀请好友") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/inviteFriends"
				})
			}
			if (e.name == "我的积分") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/myIntegral"
				})
			}
			if (e.name == "我的团队") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/myTeam"
				})
			}
		},
		//商家工具 跳转
		gettools(e) {
			if (e.name == "提现明细") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/myWithdrawal"
				})
			}
			if (e.name == "我的设备") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/myDevice/myDevice"
				})
			}
			if (e.name == "我的饮水") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/myDrinkingWater/myDrinkingWater"
				})
			}

			if (e.name == "我的售后") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/myService"
				})
			}
			if (e.name == "我的售后s") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/myServiceSb"
				})
			}
			if (e.name == "代理申请") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/proxyApplication"
				})
			}
			if (e.name == "充值记录") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/rechargeRecords"
				})
			}
			if (e.name == "客服中心") {
				uni.navigateTo({
					url: "/subpackageA/pages/my/customerServiceCenter"
				})
			}
		},
		//跳转优惠劵
		getcoupon() {
			uni.navigateTo({
				url: "/subpackageA/pages/my/coupon"
			})
		},
		//跳转余额
		balance() {
			uni.navigateTo({
				url: "/subpackageA/pages/my/balance?nonPresentIncome=" + this.userData.nonPresentIncome
			})
		},
	}
}
</script>

<style lang="scss">
.box {
	min-height: 100vh;
	background-color: #F0F3F6;
	padding-bottom: 32rpx;
}

.tito {
	height: 352rpx;
	background: linear-gradient(360deg, rgba(212, 231, 250, 0) 0%, #D4E7FA 100%);
	position: relative;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	.yuan {
		width: 256rpx;
		height: 256rpx;
		background: linear-gradient(49deg, #C8E1FA 0%, rgba(225, 237, 250, 0) 100%);
		border-radius: 50%;
		position: absolute;
		right: -7%;
		top: -10%;
	}

	.image-text-phone-icon {
		display: flex;
		align-items: center;
		margin-top: auto;
		margin-bottom: 32rpx;

		.image {
			image {
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
			}
		}

		.text-phone {
			margin-left: 16rpx;

			.text {
				font-weight: 600;
				font-size: 32rpx;
				color: #14171A;
			}

			.phone {
				font-size: 24rpx;
				color: #2E3033;
				margin-top: 16rpx;
			}
		}

		.icon {
			margin-left: auto;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
}

.balance-coupons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-top: 32rpx;

	.balance {
		width: 332rpx;
		height: 156rpx;
		background: #25B7FA;
		border-radius: 16rpx;
		box-shadow: 0px 10px 20px #AFD4FA;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 32rpx;
		box-sizing: border-box;

		.text-money {
			.text {
				font-size: 24rpx;
				color: #FFF;
			}

			.money {
				font-size: 36rpx;
				color: #FFFFFF;
				margin-top: 16rpx;
			}
		}

		.icon {
			margin-top: auto;

			image {
				width: 136rpx;
				height: 136rpx;
			}
		}
	}

	.coupons {
		width: 332rpx;
		height: 156rpx;
		background: linear-gradient(144deg, #FAA805 0%, #FA6B05 100%);
		border-radius: 16rpx;
		box-shadow: 0px 10px 20px #FACEAF;
	}
}

.myOrder-allOrders {
	height: 222rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	margin: 64rpx 30rpx 0;
	padding: 24rpx;
	box-sizing: border-box;

	.text-myOrder-allOrders {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.myOrder {
			font-weight: 600;
			font-size: 32rpx;
			color: #14171A;
		}

		.allOrders {
			font-size: 24rpx;
			color: #B1B2B2;
			display: flex;
			align-items: center;
		}
	}

	.list-text {
		text-align: center;
		display: flex;
		justify-content: space-around;
		margin-top: 24rpx;

		.image-text {
			.image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}

			.text {
				font-size: 24rpx;
				color: #303332;
			}
		}
	}
}

.activity {
	margin-top: 24rpx;
}

.merchantTools {
	background: #FFFFFF;
	border-radius: 16rpx;
	margin: 24rpx 30rpx;
	padding: 24rpx;
	box-sizing: border-box;

	.tools {
		font-weight: 600;
		font-size: 32rpx;
		color: #14171A;
		margin-bottom: 32rpx;
	}

	.metchantList {
		.image-text-icon:first-child {
			margin-top: 0rpx;
		}

		.image-text-icon:last-child {
			border-bottom: none;
		}

		.image-text-icon {
			display: flex;
			align-items: center;
			height: 72rpx;
			margin-top: 24rpx;
			border-bottom: 2rpx solid #F1F2F2;

			.image {
				image {
					width: 48rpx;
					height: 48rpx;
					vertical-align: middle;
				}
			}

			.text {
				font-size: 28rpx;
				color: #2E3033;
				margin-left: 16rpx;
			}

			.icon {
				margin-left: auto;
			}
		}
	}
}
</style>